Day 27. PHP教程: 實作簡單電商網站 (準備篇)

2018 iT 邦幫忙鐵人賽

DAY 27

Modern Web

寫給朋友的 PHP 從 0 到 100 實戰教程系列第 27 篇

2018鐵人賽

falconwei

團隊神功護體

2018-01-13 22:48:01

11113 瀏覽

分享至

我們有很多前置步驟要來消化一下，今天先介紹介面與資料庫

介面我們設計上路徑是這樣

首頁(可登入臉書)> 加購頁(可選購商品) > 若有商品要結帳送金流 > 感謝頁(可下載商品)

view/header/default.php 更新頁首到 bootstrap 4.0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php if(isset($title)){ echo $title; }?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="style/main.css">
    <style>
        .borderShadow {
            border: 1px solid #ddd;
            box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
        }
    </style>
</head>
<body>

view/footer/default.php 更新頁尾到 bootstrap 4.0

<!-- 這裏會放 footer 頁尾的資料 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>
</html>

view/body/index.php 首頁

<div class="container">
	<div class="row">
	  <div class="col-xs-10 col-sm-10 col-lg-8 mx-auto py-3 borderShadow my-sm-4">
    <h2 class="py-2 mx-auto">我們畫的素材送給你</h2>
    <p>我們畫的素材免費送給你，我們畫的素材免費送給你，我們畫的素材免費送給你我們畫的素材免費送給你我們畫的素材免費送給你我們畫的素材免費送給你我們畫的素材免費送給你</p>
      <div class="card mb-3">
        <img class="card-img-top" src="images/article/26804015_138111763527272_80447334_n.jpg" alt="Card image cap">
      </div>
      <h2 class="pt-3">登入臉書後免費下載</h2>
      <?php include("view/_component/fb-login.php");?>
  </div>
</div>

view/body/upsell.php 加購頁

<div class="container">
	<div class="row">
	  <div class="col-xs-10 col-sm-10 col-lg-8 mx-auto py-3 borderShadow my-sm-4">
    <h2 class="py-2 mx-auto">整包圖庫 3 折入手</h2>
      <div class="card mb-3">
        <img class="card-img-top" src="images/article/26853157_138111770193938_1490175646_o.jpg" alt="Card image cap">
      </div>
      <div class="card-body">
        <p class="card-text">
          <span style="text-decoration: line-through;">原價 TWD $ 500 元</span>, 
          <span style="color: red; font-size: 1.5em;"> 特價只要 TWD $150 元</span>
          <a href="<?=Config::BASE_URL?>do_upsell">
            <img class="img-fluid mx-auto" src="images/common/upsell-btn.png">
          </a>
        </p>
      </div>
      <center>
        <a href="<?=Config::BASE_URL?>do_checkout" class="btn btn-outline-secondary mx-auto">不用了，謝謝</a>
      </center>
    </div>
  </div>
</div>

view/body/thankyou.php 完成結帳後呈現的頁面

<div class="container">
	<div class="row">
        <div class="col-sm-10 col-lg-6 mx-auto pt-3">
            <h1 class="py-md-3">感謝您的支持！</h1>
            <div class="card mb-3">
                <img class="card-img-top" src="images/article/26804015_138111763527272_80447334_n.jpg" alt="Card image cap">
                <div class="card-body">
                    <a href="#" class="btn btn-primary btn-block">下載</a>
                </div>
            </div>
            <?php if(isset($productKeys) AND count($productKeys) > 1) { ?>
            <div class="card mb-3">
                <img class="card-img-top" src="images/article/26853157_138111770193938_1490175646_o.jpg" alt="Card image cap">
                <div class="card-body">
                    <a href="#" class="btn btn-primary btn-block">下載</a>
                </div>
            </div>
            <?php }?>
            <a href="<?=Config::BASE_URL?>do_unset">回首頁</a>
        </div>
    </div>
</div>

view/body/fail.php 結帳失敗後呈現的頁面

<div class="container">
	<div class="row">
	  <div class="col-xs-10 col-sm-10 col-lg-8 mx-auto py-3 borderShadow my-sm-4">
    <h2 class="py-2 mx-auto">糟糕</h2>
      <div class="card-body">
        <p class="card-text">
            綠界金流表示結帳過程有點問題，請重新嘗試或聯絡客服
        </p>
      </div>
      <center>
        <a href="<?=Config::BASE_URL?>upsell" class="btn btn-outline-primary mx-auto">再次出發</a>
      </center>
    </div>
  </div>
</div>

再補上首頁的 controller

controller/index.php

<?php
include('view/header/default.php'); // 載入共用的頁首
include('view/body/index.php');     // 載入登入用的頁面
include('view/footer/default.php'); // 載入共用的頁尾

並將 route.php 的預設頁面改成 index.php

<?php
// 用參數決定載入某頁並讀取需要的資料
$parameter = strtolower($route->getParameter(1));
$controller_array = scandir('controller');
$controller_array = array_change_key_case($controller_array, CASE_LOWER);

if (in_array($parameter.'.php', $controller_array)) {
  include( 'controller/'.$parameter.'.php' );
}else{
  include( 'controller/index.php' );
}

這樣就能打開這個網址看到這個畫面

http://localhost/game/

再來是資料庫方面新增訂單資料表

CREATE TABLE IF NOT EXISTS `orders` (
  `orderID` varchar(20) NOT NULL,
  `memberID` int(10) NOT NULL,
  `description` text NOT NULL,
  `serviceFee` int(10) NOT NULL,
  `shippingFee` int(10) NOT NULL,
  `cartTotal` int(10) NOT NULL,
  `orderTotal` int(10) NOT NULL COMMENT '總金額',
  `status` int(1) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `orders`
--
ALTER TABLE `orders`
 ADD PRIMARY KEY (`orderID`);

這樣下一篇就可以來設計邏輯囉